<template>
  <div>

    <div class="content">
      <!-- 抖音支持退款 其他的支持登记退款 -->
      <!-- 抖音 -->
      <div
        v-if=" rowInfo.pay_type==3"
        class="title"
      >
        退款到账时效受抖音接口限制，非实时
        <el-tooltip effect="dark">
          <div
            slot="content"
            style="width:200px;line-height:20px;"
          >
            银行卡支付的退款 7 天内到账，支付宝支付（余额、银行卡快捷支付等）的退款 3 个工作日内到账，微信支付（余额、银行卡快捷支付等）的退款 7 天内到账
          </div>
          <svg-icon
            icon-class="question"
            class="question"
          />
        </el-tooltip>
      </div>

      <el-form
        ref="ruleForm"
        label-width="100px"
        label-position="top"
        :model="ruleForm"
        :rules="rules"
        class="ruleForm"
      >
        <el-form-item :label="`订单类型:${rowInfo.product_name}`">
          <!-- 充值喵币 -->
          <div
            v-if="rowInfo.order_type==1"
            class="coinMain rowFlex flexWarp"
          >
            <p class="coinMainItem"><span class="label">充值金额:</span> <span class="value"> {{ $formatNumber(rowInfo.amount) }} </span></p>
            <p class="coinMainItem"><span class="label">可退金额:</span> <span class="value"> {{ $formatNumber(refundInfo.refundable_amount) }} </span></p>
            <p class="coinMainItem"><span class="label">充值喵币:</span> <span class="value"> {{ $formatNumber(rowInfo.coin) }} </span></p>
            <p class="coinMainItem"><span class="label">用户喵币余额:</span> <span class="value"> {{ $formatNumber(refundInfo.surplus_coin) }} </span> <i
                class="el-icon-refresh-right"
                @click="reqeustRefundData()"
              ></i> </p>
            <p class="coinMainItem"><span class="label">充值赠币:</span> <span class="value"> {{ $formatNumber(rowInfo.free_coin) }} </span></p>
            <p class="coinMainItem"><span class="label">用户剩余赠币:</span> <span class="value"> {{ $formatNumber(refundInfo.surplus_free_coin) }} </span> <i
                class="el-icon-refresh-right"
                @click="reqeustRefundData()"
              ></i></p>
          </div>
          <!-- 会员充值 -->
          <div
            v-else-if="rowInfo.order_type==2"
            class="coinMain rowFlex flexWarp"
          >
            <p class="coinMainItem"><span class="label">充值金额:</span> <span class="value"> {{ $formatNumber(rowInfo.amount) }} </span></p>
            <p class="coinMainItem"><span class="label">可退金额:</span> <span class="value"> {{ $formatNumber(refundInfo.refundable_amount) }} </span></p>
            <p
              class="coinMainItem"
              style="width:100%;"
            ><span class="label">会员有效期:</span> <span class="value"> {{ refundInfo.vip_validity_period }} </span></p>
          </div>
          <!-- 解锁全集 -->
          <div
            v-else-if="rowInfo.order_type==3"
            class="coinMain rowFlex flexWarp"
          >
            <p class="coinMainItem"><span class="label">充值金额:</span> <span class="value"> {{ $formatNumber(rowInfo.amount) }} </span></p>
            <p class="coinMainItem"><span class="label">可退金额:</span> <span class="value"> {{ $formatNumber(refundInfo.refundable_amount) }} </span></p>
            <p
              class="coinMainItem"
              style="width:100%;"
            ><span class="label">解锁短剧:</span> <span class="value"> {{ refundInfo.unlock_playlet }} </span></p>
          </div>
          <div
            v-else
            class="coinMain rowFlex flexWarp"
          >
            <p class="coinMainItem"><span class="label">充值金额:</span> <span class="value"> {{ $formatNumber(rowInfo.amount) }} </span></p>
            <p class="coinMainItem"><span class="label">可退金额:</span> <span class="value"> {{ $formatNumber(refundInfo.refundable_amount) }} </span></p>
            <p class="coinMainItem"><span class="label">充值集数:</span> <span class="value"> {{ $formatNumber(rowInfo.chapter_count) }} </span></p>
            <p class="coinMainItem"><span class="label">剩余可消费集:</span> <span class="value"> {{ $formatNumber(refundInfo.surplus_chapter_count) }} </span></p>
          </div>
        </el-form-item>
        <el-form-item
          label="退款金额"
          prop="refund_amount"
        >
          <el-input
            v-model="ruleForm.refund_amount"
            type="number"
            clearable
            placeholder="请输入"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="退款原因"
          prop="reason"
        >
          <el-input
            v-model="ruleForm.reason"
            type="textarea"
            clearable
            maxlength="100"
            placeholder="请输入"
          >
          </el-input>
        </el-form-item>
        <div class="title">
          退款权益调整
          <el-tooltip
            v-if="rowInfo.order_type==1"
            content="top"
            effect="dark"
          >
            <div
              slot="content"
              style="width:200px;line-height:20px;"
            >
              将在用户当前累计剩余喵币、赠币的基础上调整，调整后余额最小为0
            </div>
            <svg-icon
              icon-class="question"
              class="question"
            />
          </el-tooltip>
        </div>
        <!-- 充值喵币 -->
        <div v-if="rowInfo.order_type==1">
          <el-form-item label="减少喵币">
            <el-input
              v-model.number="ruleForm.refund_coin"
              clearable
              oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
              type="number"
              placeholder="请输入"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="减少赠币">
            <el-input
              v-model.number="ruleForm.refund_free_coin"
              type="number"
              clearable
              oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
              placeholder="请输入"
            >
            </el-input>
          </el-form-item>
        </div>
        <!-- 充值会员 -->
        <div
          v-if="rowInfo.order_type==2"
          class="redText"
        >本笔订单会员有效期自动取消失效</div>
        <!-- 解锁全局  -->
        <div
          v-if="rowInfo.order_type==3"
          class="redText"
        >本笔订单解锁短剧自动失效</div>
        <div v-if="rowInfo.order_type == 4">
          <el-form-item label="减少可消费集">
            <el-input
              v-model.number="ruleForm.refund_chapter_count"
              clearable
              oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
              type="number"
              placeholder="请输入"
            >
            </el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <span class="dialog-footer rowFlex">
      <el-button
        class="btn"
        @click="close"
      >取 消</el-button>
      <el-button
        class="btn"
        type="primary"
        :loading="loading"
        @click="submit"
      >确 定</el-button>
    </span>
  </div>
</template>
<script>
import { refundData, refundOrder } from '@/api/order'
export default {
  props: ['rowInfo'],
  data() {
    var newReg1 = (rule, value, callback) => {
      if (value <= 0) {
        callback(new Error('退款金额必须大于0'))
      } else {
        callback() // 必须要有回调，要不然表单无法提交
      }
    }
    return {
      ruleForm: {
        id: '',
        member_id: '',
        refund_amount: '',
        refund_coin: '',
        refund_free_coin: '',
        reason: '',
        refund_chapter_count: ''
      },
      refundInfo: {
        surplus_coin: '',
        surplus_free_coin: '',
        vip_validity_period: '',
        unlock_playlet: '',
        refundable_amount: ''
      },
      loading: false,
      rules: {
        refund_amount: [
          { required: true, message: '请输入退款金额', trigger: 'blur' },
          { validator: newReg1, trigger: 'blur' }
        ],
        reason: [{ required: true, message: '请输入退款原因', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.reqeustRefundData('msg')
  },
  methods: {
    close() {
      this.$emit('cancel')
    },
    reqeustRefundData(msg) {
      const data = {
        order_type: Number(this.rowInfo.order_type),
        playlet_id: this.rowInfo.playlet_id,
        member_id: this.rowInfo.member_id,
        id: this.rowInfo.id
      }
      console.log(msg)
      refundData(data).then((res) => {
        if (res.status_code == 1) {
          this.refundInfo = res.data.data
        } else {
        }
        !msg ? this.$message.success(res.msg) : ''
      })
    },
    // 发起退款
    requestRefundOrder() {
      const param = {
        id: this.rowInfo.id,
        member_id: this.rowInfo.member_id,
        refund_amount: Number(this.ruleForm.refund_amount),
        refund_coin: Number(this.ruleForm.refund_coin),
        refund_free_coin: Number(this.ruleForm.refund_free_coin),
        reason: this.ruleForm.reason,
        refund_chapter_count: Number(this.ruleForm.refund_chapter_count)
      }
      console.log(param)
      refundOrder(param).then(
        (res) => {
          this.loading = false
          if (res.status_code == 1) {
            this.$message.success(res.msg)
            this.$emit('ok')
          }
        },
        (err) => {
          this.loading = false
          console.log(err)
        }
      )
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log(this.ruleForm.refund_amount, this.refundInfo.refundable_amount)
          if (this.ruleForm.refund_amount > Number(this.refundInfo.refundable_amount || 0)) {
            this.$message.warning('退款金额不能大于可退金额')
            return
          }
          if (Number(this.ruleForm.refund_amount) == 0) {
            this.$message.warning('退款金额不能为0')
            return
          }
          if (Number(this.ruleForm.refund_coin) > this.refundInfo.surplus_coin) {
            this.$message.warning('减少喵币不能大于该订单剩余可退喵币')
            return
          }
          if (Number(this.ruleForm.refund_free_coin) > this.refundInfo.surplus_free_coin) {
            this.$message.warning('减少赠币不能大于该订单剩余可退赠币')
            return
          }
          this.loading = true
          this.requestRefundOrder()
        } else {
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 20px;
  .title {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #606266;
    margin-bottom: 10px;
  }
  .content_text {
    font-size: 14px;
  }
  .question {
    font-weight: 16px;
    cursor: pointer;
    font-weight: 600;
  }
  ::v-deep .el-form-item__label {
    font-weight: 600;
  }
  .coinMain {
    width: 100%;
    height: auto;
    background: #f7f8fa;
    border-radius: 3px;
    padding: 10px;
    .coinMainItem {
      width: 50%;
      .label {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
      .value {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
      i {
        color: #06c261;
        font-size: 16px;
        position: relative;
        left: 5px;
        top: 2px;
        cursor: pointer;
      }
    }
  }
  .redText {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff4d4f;
  }
  ::v-deep .el-textarea__inner {
    height: 150px;
  }
}
</style>